<template>
  <div class="card-full">
    <div class="search-box">
      <el-form :inline="true" :model="filterOption">
        <el-form-item label="用户名">
          <el-input v-model="filterOption.keyword" placeholder="请输入用户名" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadData">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="mb-2">
      <!-- <el-button type="primary" @click="exportFile">导出</el-button> -->
    </div>
    <div class="table-box">
      <el-table v-loading="loading" :data="list" class="user-table" border>
        <el-table-column prop="account" label="用户名称" min-width="120" align="center" />
        <el-table-column prop="status" label="用户头像" min-width="100" align="center">
          <template #default="scope">
            <el-image :src="scope.row.avatar || AVATAR_DEFAULT" style="width: 50px; height: 50px" />
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号码" min-width="120" align="center" />
        <el-table-column prop="email" label="邮箱" min-width="120" align="center" />
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="pagination.pageSizes"
        :total="pagination.total"
        :layout="'total, sizes, prev, pager, next, jumper'"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
      ></el-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
import useList from "@/hooks/useList";
import { getList } from "@/api/modules/manager.ts";
import { ElMessage } from "element-plus";
import { AVATAR_DEFAULT } from "@/config";

// 1. 定义用户数据类型
interface User {
  id: number;
  name: string;
  age: number;
  email: string;
  status: "active" | "inactive";
}

// 2. 定义筛选条件类型
interface UserFilterOption {
  keyword?: string;
}

// 3. 使用 useList Hook
const {
  loading,
  list,
  filterOption, // 筛选条件对象，可以双向绑定
  reset, // 重置筛选条件和分页
  //   exportFile, // 导出文件函数
  loadData, // 手动加载数据函数
  pagination, // 包含total, pageSize, currentPage, pageSizes 的计算属性
  handleCurrentChange, // 页码改变事件处理器
  handleSizeChange // 每页大小改变事件处理器
} = useList<User, UserFilterOption>(getList, {
  filterOption: ref<UserFilterOption>({
    keyword: ""
  }),
  //   exportRequestFn: exportUserList, // 传入导出数据的 API 函数
  immediate: true, // 页面加载后立即请求数据

  message: {
    GET_DATA_IF_FAILED: "获取用户列表失败",
    EXPORT_DATA_IF_FAILED: "导出用户数据失败",
    EXPORT_DATA_IF_SUCCEED: "用户数据导出成功！"
  },

  requestSuccess: result => {
    console.log(`成功获取到 ${result.total} 条数据`);
  },
  requestError: error => {
    console.error("数据获取失败回调:", error);
  },
  exportSuccess: () => {
    // console.log("导出成功回调");
  },
  exportError: error => {
    // console.error("导出失败回调:", error);
  }
});
</script>
